import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import { Layout } from "antd";
import "./home.scss";
import Sidebar from "./Sidebar";
import Nav from "./Nav";
const { Header, Footer, Sider, Content } = Layout;
export default function (props) {
  let [collapsed, useCollapsed] = useState(false);
  function collapsedClick(val) {
    collapsed = useCollapsed(val)
  }
  let routerHistory = useHistory()
  routerHistory.listen((error, nextState) => {
    // console.log(`error, nextState`, error, nextState)
  })
  return (
    <div id="pageHome">
      <Layout style={{ height: "100%" }}>
        <Sidebar collapsed={collapsed}></Sidebar>
        <Layout>
          <Header style={{ padding: "0px" }}>
            <Nav collapsedClick={collapsedClick} collapsed={collapsed}></Nav>
          </Header>
          <Content>{props.children}</Content>
        </Layout>
      </Layout>
    </div>
  );
}
